<template>
  <!-- 数据报表组件 -->
  <div class="report_cont">
    <!-- 面包屑导航栏区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 为 echart 准备一个定义了宽高的 DOM -->
      <div id="report_echarts" style="width: 700px;height:400px;"></div>
    </el-card>
  </div>
</template>
<!-- <script src="echarts.js"></script> -->

<script>
  /* ---------------------------- 重点：Lodash -------------------------------
    Lodash：是一个一致性、模块化、高性能的 JavaScript 实用工具库
    https://www.lodashjs.com/
    主要用于对数据的处理操作
    下载依赖：npm install echarts --save
  */
  import _ from 'lodash'

  /* ----------------------------- 重点：Echarts ----------------------------
    数据可视化工具库
    https://echarts.apache.org/zh/api.html#echartsInstance
    import echarts from 'echarts'  不能这样引入，会报错（老版）
    import * as echarts from 'echarts'  （正确引入方法）
    下载依赖：npm install echarts --save
  */
  import * as echarts from 'echarts'


  export default {
    data() {
      return {
        // 时间统计的折线图需要合并的对象
        options: {
          title: {
            text: '用户来源'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#E9EEF3'
              }
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            boundaryGap: false
          }],
          yAxis: [{
            type: 'value'
          }]
        },
      }
    },
    /* --------------------------------- 重点 -------------------------------
    mounted钩子函数：
      在模板渲染成html后调用的钩子函数
      不会保证所有的子组件也都被挂载完成。
      希望整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 this.$nextTick()
    */
    async mounted() {
      // -------------------------------- 使用Echarts数据图表可视组件 -------------------------
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('report_echarts'));


      // 获取 基于时间统计的折线图的数据
      let {
        data: res
      } = await this.$http.get(`reports/type/1`)
      console.log(res);

      if (res.meta.status === 200) {
        this.getReportsOption = res.data
      } else {
        return this.$message.error("获取折线图数失败")
      }


      /* ------------------------------- 重点：Lodash_.merge --------------------
        该方法类似_.assign， 除了它递归合并 sources 来源对象自身和继承的可枚举属性到 object 目标对象。
        如果目标值存在，被解析为undefined的sources 来源对象属性将被跳过。
        数组和普通对象会递归合并，其他对象和值会被直接分配覆盖。
        源对象从从左到右分配。后续的来源对象属性会覆盖之前分配的属性。
      */
      let myChart_options = _.merge(res.data, this.options);
      // 不能使用Object.assign()


      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(myChart_options);
    }
  }

</script>
<style lang="less" scoped>
  
</style>